<template>
  <a-modal
    v-model:visible="visible"
    :footer="false"
    simple
    hide-title
    modal-class="!p-0px h-500px !w-400px !rounded-16px"
  >
    <a-form :model="form" :style="{ width: '400px' }" @submit="handleSubmit">
      <div class="p-20px">
        <a-form-item field="media_url" label="图片">
          <Upload @success="handleSuccess">
            <div class="flex justify-center items-center w-140px h-140px rounded-8px bg-[#f7f8fa]">
              <div class="arco-upload-picture-card-text" v-if="!form.media_url">
                <IconPlus />
              </div>
              <div v-else class="h-full">
                <img class="w-full h-full object-cover" :src="form.media_url" alt="" />
              </div>
            </div>
          </Upload>
        </a-form-item>

        <a-form-item field="content" label="内容">
          <div class="w-300px rounded-8px flex flex-row items-center">
            <textarea
              v-model="form.content"
              placeholder="说点什么吧"
              maxlength="200"
              class="input area w-full max-h-200px min-h-100px rounded-8px"
              type="text"
            />
          </div>
        </a-form-item>
        <a-form-item>
          <div class="submit">
            <button
              class="px-16px box-border h-32px rounded-8px bg-gradient-to-r from-#FF4DC4 to-#7733FF text-14px font-bold text-white hover:scale-105 transition"
              html-type="submit"
            >
              发布
            </button>
          </div>
        </a-form-item>
      </div>
    </a-form>
  </a-modal>
</template>
<script setup>
import { reactive, watchEffect } from 'vue'
import { useVModel } from '@vueuse/core'
// import { getAllGame } from '@/api/game'
import Upload from '@/components/upload/index.vue'
import { IconPlus } from '@arco-design/web-vue/es/icon'
import { Message } from '@arco-design/web-vue'
const props = defineProps(['visible'])
const emits = defineEmits(['update:visible', 'save'])
const visible = useVModel(props, 'visible', emits)
const form = reactive({
  media_url: '',
  content: ''
})
watchEffect(() => {
  if (visible.value) {
    form.media_url = ''
    form.content = ''
  }
})
const handleSubmit = () => {
  if (form.content.trim() === '') {
    Message.error('内容不能为空')
    return
  }
  const params = {
    ...form
  }
  emits('save', params)
}
const handleSuccess = (res) => {
  form.media_url = res
}
</script>
<style lang="less" scoped>
.input {
  box-sizing: border-box;
  border: 1px solid #d9d9d9;
  outline: none;
  padding: 10px;
}
.input:focus {
  box-shadow: 0 0 0 2px #7733ff;
  border: 1px solid transparent;
}
.area {
  overflow-y: hidden;
}
.user-info {
  &&::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
}
.select {
  height: 44px;
  width: 300px;
  border: 1px solid #d9d9d9;
  padding-left: 10px;
}
::v-deep(.arco-select-view-single) {
  background-color: transparent !important;
  padding: 0;
}

::v-depp(.arco-select-view) {
  background-color: red !important;
  border-color: red !important;
  box-shadow: none !important;
}
::v-deep(.arco-input-wrapper) {
  background-color: transparent !important;
}
</style>
